<template>
  <div class="overview-view-page">
    <div class="headline">商户统计</div>
    <div class="statistics">
      <el-row :gutter="20">
        <el-col class="col-wrapper" :span="8">
          <div class="box">
            <div class="left">
              <div class="title">申请中的商户数</div>
              <div class="number">{{ dataInfo.stayCount }}</div>
            </div>
            <div class="icon">
              <i class="iconfont icon-menu"></i>
            </div>
          </div>
        </el-col>
        <el-col class="col-wrapper" :span="8">
          <div class="box">
            <div class="left">
              <div class="title">开发中的商户数</div>
              <div class="number">{{ dataInfo.developmentCount }}</div>
            </div>
            <div class="icon">
              <i class="iconfont icon-dev"></i>
            </div>
          </div>
        </el-col>
        <el-col class="col-wrapper" :span="8">
          <div class="box">
            <div class="left">
              <div class="title">已上线的商户数</div>
              <div class="number">{{ dataInfo.onlineCount }}</div>
            </div>
            <div class="icon">
              <i class="iconfont icon-online"></i>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="charts-wrapper">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="charts-box">
            <div class="title">商户近7天活跃数</div>
            <div class="charts-content">
              <div class="charts-example" id="active"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="charts-box">
            <div class="title">单公司商户数前5排行</div>
            <div class="charts-content">
              <div class="charts-example" id="merchant"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="charts-box">
            <div class="title">商户地理位置</div>
            <div class="charts-content">
              <div class="charts-example" id="position"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="charts-box">
            <div class="title">支付工具使用比例</div>
            <div class="charts-content">
              <div class="charts-example" id="payment"></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts/lib/echarts'
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/effectScatter') // 拐点出闪烁，高亮
require('echarts/lib/component/tooltip') // 提示组件
require('echarts/lib/component/legend') // 图例组件
require('echarts/lib/component/markPoint') // 标注组件
import { getData } from '@/api/base'

export default {
  name: 'OverviewView',
  data() {
    return {
      dataInfo: {}
    }
  },
  created() {
    // this.init()
  },
  methods: {
    async init() {
      let res = await getData()
      let { code, data } = res
      if (code === 0) {
        let { activeList, areaList, companyList, ...dataInfo } = data
        this.dataInfo = dataInfo
        this.$nextTick(() => {
          this.handleActiveInit(activeList)
          this.handleMerchantInit(companyList)
          this.handlePositionInit(areaList)
          this.handlePaymentInit(dataInfo)
        })
      }
    },
    /**
     * 初始化 商户近7天活跃数 图表
     */
    handleActiveInit(data) {
      let keys = [],
        values = []
      data.map(item => keys.push(item.days) && values.push(item.num))
      let myChart = echarts.init(document.getElementById('active'))
      myChart.setOption({
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#409EFF'
          },
          {
            offset: 1,
            color: '#6A65FF'
          }
        ]),
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            // 默认为直线，可选为：'line' | 'shadow'
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: keys,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: '活跃数',
            type: 'bar',
            barWidth: '50%',
            data: values
          }
        ]
      })
    },
    /**
     * 初始化 单公司商户数前5排行 图表
     */
    handleMerchantInit(data) {
      let keys = [],
        values = []
      data.map(item => keys.unshift(item.brandCompany) && values.unshift(item.count))
      let myChart = echarts.init(document.getElementById('merchant'))
      myChart.setOption({
        color: '#409EFF',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: keys,
          axisLabel: {
            interval: 0,
            formatter: function(params) {
              var index = 10
              var newstr = ''
              for (var i = 0; i < params.length; i += index) {
                var tmp = params.substring(i, i + index)
                newstr += tmp + '\n'
              }
              if (newstr.length > 20) return newstr.substring(0, 20) + '...'
              else return '\n' + newstr
            }
          }
        },
        series: [
          {
            name: '商户数',
            type: 'bar',
            barWidth: '50%',
            data: values
          }
        ]
      })
    },
    /**
     * 初始化 商户地理位置 图表
     */
    handlePositionInit(data) {
      let keys = [],
        values = []
      data = data.reduce((res, item) => {
        keys.push(item.provinceName)
        values.push(item.count)
        res.push({ name: item.provinceName, value: item.count })
        return res
      }, [])
      let myChart = echarts.init(document.getElementById('position'))
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 20,
          top: 'center',
          data: keys
        },
        series: [
          {
            name: '地理位置',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: data
          }
        ]
      })
    },
    /**
     * 初始化 支付工具使用比例 图表
     */
    handlePaymentInit(dataInfo) {
      let { alipyCount, wechatCount, alipyAndWechatCount } = dataInfo
      let myChart = echarts.init(document.getElementById('payment'))
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 20,
          top: 'center',
          data: ['仅用支付宝', '仅用微信', '支付宝+微信']
        },
        series: [
          {
            name: '使用比例',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              { value: alipyCount, name: '仅用支付宝' },
              { value: wechatCount, name: '仅用微信' },
              { value: alipyAndWechatCount, name: '支付宝+微信' }
            ],
            roseType: 'radius',
            label: {
              color: '#000'
            },
            labelLine: {
              lineStyle: {
                color: '#000'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay() {
              return Math.random() * 200
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
